<template>
  <div class="layout">
    <el-form label-position="left" label-width="auto" class="zw-table-search" ref="formRef" :model="form">
      <el-row :gutter="20" class="el_filter_row">
        <!-- 搜索 -->
        <el-col :span="8">
          <el-form-item :label="formItemFn()?.label">
            <el-input
              v-model="form.keyword"
              class="search_item"
              :placeholder="
                isBoth
                  ? '请输入标题/内容进行查找'
                  : isContent
                  ? '请输入内容进行查找'
                  : type == 2
                  ? '请输入图片名称进行搜索'
                  : type == 3
                  ? '请输入音频名称进行搜索'
                  : type == 4
                  ? '请输入视频名称进行搜索'
                  : type == 5
                  ? '请输文件名称进行搜索'
                  : '请输入标题进行查找'
              "
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- 选择部门人员 -->
        <el-col :span="8">
          <el-form-item :label="formItemFn()?.derpartLabel">
            <el-select v-model="form.user_id" placeholder="全部" multiple collapse-tags collapse-tags-tooltip>
              <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 上传时间 -->
        <el-col :span="8">
          <el-form-item :label="formItemFn()?.timeLabel">
            <el-date-picker popper-class="create_time" :editable="false" value-format="YYYY-MM-DD HH:mm:ss" v-model="form.creat_time" type="datetimerange" range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="[2, 4, 5].includes(type)">
          <el-form-item :label="`${labelNameFn()}类型`">
            <el-select class="search_item" v-model="form.type" placeholder="全部类型">
              <el-option v-for="item in typeDiff()" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 标签筛选 -->
        <el-col :span="8" v-if="type != 8">
          <el-form-item label="标签筛选">
            <el-select v-model="form.tag_list" placeholder="请选择标签" multiple @click="selecTag" @change="changeTag" popper-class="zw-hide_select_option">
              <el-option v-for="item in AllTags" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
            <el-button type="primary" @click="submitForm(formRef)">查询</el-button>
            <el-button @click="resetForm(formRef)">清空</el-button>
            <el-button type="text" :icon="visible ? ArrowDownBold : ArrowUpBold" @click="pickUp">{{ visible ? '收起' : '展开' }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 标签弹框 -->
    <ZWSelectTag ref="searchSelectRef" @submit="getTags" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch, onMounted, toRefs } from 'vue'
  import type { ElForm } from 'element-plus'
  import { DFormat } from '@/utils/utils'
  import ZWSelectTag from '@/components/ZWSelectTag.vue'
  import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
  import { getCreateList } from '@/api/common'

  import { getSetionId, AFold } from '@/utils/utils'
  import { useStore } from '@/store'
  type FormInstance = InstanceType<typeof ElForm>
  const searchSelectRef: any = ref<null | HTMLElement>(null)
  const props = defineProps(['isContent', 'isBoth', 'type'])
  const emit = defineEmits(['submit', 'getTableH'])
  const store = useStore()

  const formRef = ref<FormInstance>()
  const tags = ref([])
  // 选择标签options
  const AllTags = ref([])
  // 创建人options
  const creators = ref([])
  // 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用
  const { type } = toRefs(props)
  const labelNameFn = () => {
    // console.log(type.value, "==");
    switch (type.value) {
      case 1:
        return '文本'
      case 2:
        return '图片'
      case 3:
        return '音频'
      case 4:
        return '视频'
      case 5:
        return '文件'
      case 6:
        return '链接'
    }
  }
  const visible = ref(true)
  const pickUp = () => {
    visible.value = !visible.value
    AFold(visible.value, '.el_filter_row')
    emit('getTableH')
  }
  const typeDiff = () => {
    return [
      { value: '-1', name: `全部类型` },
      { value: '0', name: `普通${labelNameFn()}` },
      {
        value: '1',
        name: `雷达${labelNameFn()}`
      }
    ]
  }
  // 标签
  const formItemFn = () => {
    let label: string = '文本搜索'
    let derpartLabel: string = '创建人'
    let timeLabel: string = '添加时间'
    switch (props.type) {
      case 1:
        break
      case 2:
        label = '图片搜索'
        derpartLabel = '上传者'
        timeLabel = '上传时间'
        break
      case 3:
        label = '音频搜索'
        derpartLabel = '上传者'
        break
      case 4:
        label = '视频搜索'
        derpartLabel = '上传者'
        timeLabel = '上传时间'
        break
      case 5:
        label = '文件搜索'
        derpartLabel = '上传者'
        break
      case 6:
        label = '链接搜索'
        derpartLabel = '创建者'
        timeLabel = '创建时间'
        break
      case 7:
        label = '搜索内容'
        derpartLabel = '上传者'
        break
      case 8:
        label = '搜索内容'
        derpartLabel = '创建者'
        break
    }
    return {
      label,
      derpartLabel,
      timeLabel
    }
  }
  const formItem = reactive([
    {},
    {
      label: '文本搜索',
      derpartLabel: '创建人',
      timeLabel: '上传时间'
    },
    {
      label: '图片搜索',
      derpartLabel: '上传者',
      timeLabel: '上传时间'
    },
    {
      label: '音频搜索',
      derpartLabel: '上传者',
      timeLabel: '上传时间'
    },
    {
      label: '视频搜索',
      derpartLabel: '上传者',
      timeLabel: '上传时间'
    },
    {
      label: '文件搜索',
      derpartLabel: '上传者',
      timeLabel: '上传时间'
    },
    {
      label: '链接搜索',
      derpartLabel: '创建者',
      timeLabel: '创建时间'
    },
    {
      label: '搜索内容',
      derpartLabel: '创建者',
      timeLabel: '上传时间'
    },
    {
      label: '搜索内容',
      derpartLabel: '创建者',
      timeLabel: '上传时间'
    }
  ])
  const form: any = reactive({
    keyword: '',
    user_id: [],
    start_time: '',
    end_time: '',
    creat_time: [],
    tag_list: []
  })
  //获取创建人列表
  const getCreator = async() => {
    const res = await getCreateList({})
    res.map((item: any) => {
      item.name = `${item.name}(${item.phone})`
    })
    creators.value = res
  }
  // 打开选择标签
  const selecTag = () => {
    searchSelectRef.value.showCreatTag = true
    searchSelectRef.value.appDialog.visible = true
    searchSelectRef.value.selectTags = AllTags.value
  }
  // 获取标签
  const getTags = (data: any) => {
    AllTags.value = data
    form.tag_list = getSetionId('id', data)
  }
  //
  const changeTag = (data: any) => {
    let arr: any[] = AllTags.value.filter((item: any) => data.includes(item.id))
    form.tag_list = getSetionId('id', arr)
    AllTags.value = arr
  }

  // 提交查询
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
      if (!valid) return
      form.start_time = form.creat_time[0]
      form.end_time = form.creat_time[1]
      emit('submit', form)
    })
  }
  //重置
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    form.keyword = ''
    form.user_id = []
    form.start_time = ''
    form.end_time = ''
    form.tag_list = []
    form.creat_time = []
    form.type = '-1'
    emit('submit', form)
  }
  onMounted(() => {
    getCreator()
  })
</script>
<style lang="scss">
  @import './search.scss';
</style>
